<template>
  <div class="md:flex">
    <template v-for="(item, index) in growCardList" :key="item.title">
      <Card
        size="small"
        :loading="isLoading"
        :title="item.title"
        class="md:w-1/4 w-full !md:mt-0 !mt-4"
        :class="[index + 1 < 4 && '!md:mr-4']"
        :canExpan="false"
      >
        <template #extra>
          <Tag :color="item.color">{{ item.action }}</Tag>
        </template>

        <div class="py-4 px-4 flex justify-between">
          <CountTo prefix="D-" :startVal="0" :endVal="item.value" class="text-2xl"/>
          <Icon :icon="item.icon" :size="40"/>
        </div>

        <div class="p-2 px-4 flex justify-between">
          <span>总{{ item.title }}</span>
          <CountTo prefix="M-" :startVal="0" :endVal="item.total"/>
        </div>
      </Card>
    </template>
  </div>
</template>

<script lang="ts">
  import {defineComponent, toRefs} from '@vue/runtime-core';
  import {reactive} from "vue";
  import {CountTo} from '/@/components/CountTo/index';
  import {Icon} from '/@/components/Icon';
  import {Tag, Card} from 'ant-design-vue';

  export default defineComponent({
    name: 'SiteGrowCard',
    components: {
      CountTo,
      Icon,
      Tag,
      Card,
    },
    props: {
      isLoading: {
        type: Boolean,
        default: true,
      },
      growCardList: {
        type: Object,
        default: null,
      },
    },
    setup() {

      const data = reactive({});

      return {
        ...toRefs(data),
      };
    }
  });

</script>

<style scoped>

</style>
